<template>
  <div class="income pad">
    <div class="head">
      <span>收支查询</span>
    </div>
    <div class="search m-t-b">
      <el-date-picker
        v-model="date"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="left">
      </el-date-picker>
      <el-button @click="handleSearch" type="primary">
        <i class="el-icon-search"></i> 查询
      </el-button>
    </div>
    <el-table class="m-t-b" stripe border :data="incomes" v-loading="loading">
      <el-table-column label="时间" prop="createDate"></el-table-column>
      <el-table-column label="收入">
        <template slot-scope="scope">
          {{scope.row.totalMoney + '元'}}
        </template>
      </el-table-column>
      <el-table-column label="支出">
        <template slot-scope="scope">
          {{scope.row.cost + '元'}}
        </template>
      </el-table-column>
      <el-table-column label="盈利">
        <template slot-scope="scope">
          {{scope.row.totalMoney - scope.row.cost + '元'}}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="m-t-b flex"
      :page-size="pageSize"
      layout="prev, pager, next"
      @current-change="handlePagi"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
import { incomeList } from '../api'
import { formatDate } from '../util'

export default {
  name: 'income',
  data () {
    return {
      date: '',
      loading: true,
      pageSize: 10,
      total: 0,
      incomes: []
    }
  },
  methods: {
    handleSearch () {
      if (!this.$checkAuth('canSearchIncome')) {
        return this.$message.error('暂无对应操作权限!')
      };
      if (!this.date) {
        return this.$message.error('请选择有效时间段!')
      }
      let start = Date.parse(this.date[0])
      let end = Date.parse(this.date[1])
      this.fetchIncome(1, start, end)
    },
    handlePagi (page) {
      if (this.date) {
        let start = Date.parse(this.date[0])
        let end = Date.parse(this.date[1])
        this.fetchIncome(1, start, end)
      } else {
        this.fetchIncome(page)
      }
    },
    fetchIncome (index, start, end) {
      this.loading = true
      start = start || null
      end = end || null
      incomeList({
        index: index,
        count: this.pageSize,
        queryParam: {
        startDate: start,//开始时间
        endDate: end//结束时间
        }
      })
      .then(res => {
        if (res.data.code === 1) {
          let list = res.data.data.list;
          this.total = res.data.data.totalRecord;
          for (let i = 0; i < list.length; i ++) {
            list[i].createDate = formatDate(list[i].createDate);
            list[i].cost = 0
          };
          this.incomes = list
        } else {
          this.$message.error(res.data.msg || '网络异常!')
        }
        this.loading = false;
      })
      .catch(e => {
        this.loading = false
        this.$message.error('网络异常!')
      })
    }
  },
  watch: {
    date () {
      if (!this.date) {
        this.fetchIncome(1)
      }
      return this.date
    }
  },
  created () {
    this.fetchIncome(1)
  }
}
</script>
<style lang="scss">
  .income {
    .el-range-separator {
      padding: 0 10px!important;
      text-align: center;
    }
    .search {
      display: flex;
    }
    table {
      .cell {
        text-align: center;
      }
    }
  }
</style>
